<script setup lang="ts">
import { PropType, ref, watch } from 'vue'

const $props = defineProps({
    areacode: {
        type: Array as PropType<string[]>,
        default() {
            return []
        },
    },
})
const pickRef = ref()
const areaStr = ref('')
watch(
    $props,
    () => {
        setTimeout(() => {
            console.log('pickRef.value', pickRef.value)
            const { areas, area, citys, city, provinces, province } = pickRef.value
            const str = `${provinces[province].name} ${citys[city].name} ${areas[area].name}`
            areaStr.value = str
        }, 200)
    },
    {
        immediate: true,
    },
)
</script>

<template>
    <text>{{ areaStr }}</text>
    <u-picker ref="pickRef" mode="region" :area-code="$props.areacode"></u-picker>
</template>

<style lang="scss" scoped></style>
